🦋 Changeset detected

Latest commit: 0d3f832

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Merging this PR will not alter performance

✅ 18 untouched benchmarks

_{Comparing maximslo:fix/animated-avif-passthrough (0d3f832) with main (1058428)}

@fkatsuhiro Added! You can run it with pnpm run test:match "animated avif"

I believe all earlier failing tests were MiniflareCoreError [ERR_RUNTIME_FAILURE], the Cloudflare Workers runtime (infrastructure/environment issue with the CI runner, not anything touched by my change)

What does have a passthrough achieve? if you have animated avif that isn't supported, you just get an unoptimized version, right? But in this case, can't you just not use the Image component for this?

Not 100% against this, just my initial thought is that it might be better to through, because by using Image you are asking for optimizations, and not getting them might be more confusing than throughing (in which case you can just avoid using the Image component).

@matthewp Yes, users could just use <img> instead. But consistency and future-proofing are the benefits. Plus passthrough is how we already handle other unsupported formats (SVG).

Without this fix: The build crashes (exit code 1) so they have no choice. Must either delete the image, convert it, or move it to public/.

To address your concern with the fix, I'd suggest logging a warning for both SVG and AVIF:

catch {
  console.warn(
    `⚠️  Astro could not optimize image "${transform.src}". ` +
    `Sharp doesn't support this format. The image will be used unoptimized. ` +
    `Consider converting to WebP or placing in the public/ folder.`
  );
  return { data: inputBuffer, format: transform.format };
}

// Return SVGs as-is
if (transform.format === 'svg') {
  console.debug(
    `⚠️ SVG image "${transform.src}" will not be optimized. ` +
    `Sharp has limited SVG support.`
  );
  return { data: inputBuffer, format: 'svg' };
}

With this fix + warning: The build succeeds and users see a clear warning message that tells them:

• The image wasn't optimized
• Suggests solutions: convert to WebP, move to public/, or use a regular <img> tag

Some might prefer to convert the AVIF and use <Image> for consistency; others might prefer a regular <img> tag. Either way, they can now deploy.

I think warning + passing through is better UX than crashing, because it unblocks the user, and a warning would clear up any confusion/inform them of the issue.

Pinging @Princesseuh for her opinion on this.

I think with a warning it's okay. Ultimately we wouldn't hide the problem like this, but since there's no real solution on the user side (because in SSR, remote images, uploads, etc you might not be able to know what you're processing), a warning and not crashing seems like a better UX, I agree.